<template>
    <div class="moduleBg">
        <module-title title="专业人员紧缺度"></module-title>
        <div class="flex" style="padding:20px 0 0 0">
          <div class="value" style="flex:1;font-size:24px;">{{data.value1}}</div>
          <div class="value" style="flex:1;font-size:24px;">{{data.value4}}</div>
          <div class="value" style="flex:1;font-size:24px;">{{data.value3}}</div>
          <div class="value" style="flex:1;font-size:24px;">{{data.value4}}</div>
        </div>
        <div class="flex" style="padding-top:4px;">
          <div class="label" style="flex:1;">{{'人才需求\n（人）'}}</div>
          <div class="label" style="flex:1;">{{'人才供给\n（人）'}}</div>
          <div class="label" style="flex:1;">{{'人才存量\n（人）'}}</div>
          <div class="label" style="flex:1;">{{'人才入职\n（人）'}}</div>
        </div>
        <div style="height:316px" ref="lack-left-module1-chart"></div>

    </div>
</template>
<script>
import * as echarts from 'echarts';
import ModuleTitle from '../ModuleTitle.vue'
export default {
    components: { ModuleTitle },
    props: {
      data: Object
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
      data: {
        handler() {
          setTimeout(() => {
            this.showChart(this.chart, 'lack-left-module1-chart', this.getOption())
          }, 100);
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            } else {
                instance.clear()
            }
            instance.setOption(option);
      },
      getOption() {
        let serie = {
                type: 'pictorialBar',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            }
            let data = this.data.list;
            return {
                // tooltip: this.getTooltipItem(),
              tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(3,32,64,0.80)',
                borderColor: '#3D5267',
                textStyle: {
                  fontSize: 16,
                  color: '#fff',
                  fontStyle: 'normal',
                  fontWeight: 'normal'
                },
                confine:true,
                appendToBody: true,
                formatter:function(p){
                  console.log('p',p)
                  let pdata = p[0]
                  return `<p style="font-size:16px; font-weight: bold;padding: 0; margin: 0">${pdata.name}:</p>
                         <p style="font-size:16px; padding: 0; margin: 0">人才需求：${data[pdata.dataIndex].value[1]}人</p>
                         <p style="font-size:16px; padding: 0; margin: 0">人才供求：${data[pdata.dataIndex].value[2]}人</p>
                         <p style="font-size:16px; padding: 0; margin: 0">人才存量：${data[pdata.dataIndex].value[3]}人</p>
                         <p style="font-size:16px; padding: 0; margin: 0">人才入职：${data[pdata.dataIndex].value[4]}人</p>`
                }
              },
                title: {
                    text: '50%以下一般紧缺  50%以上中度紧缺',
                    textStyle: {
                        color: '#FFF', fontSize: 16,
                        fontWeight: 400
                    },
                    top: 20,
                    left: 'center',

                },
                grid: {
                    bottom: 45,
                    top: 55,
                    left: 58,
                    right: 35
                },
                xAxis: {
                    data: data.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '紧缺度',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },

                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis: [{
                    name: '%',
                    splitNumber: 5,
                    nameTextStyle: {
                        color: '#FFF',
                        opacity: 0.72,
                        fontSize: 16,
                        padding: [0, 0, 0, -45]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                series: [{
                    name: '',
                    data: data.map(e => e.value[0]),
                    yAxisIndex: 0,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 1, color: 'rgba(255,160,10,1)'
                            }, {
                                offset: 0.5, color: 'rgba(255,160,10,0.5)'
                            }, {
                                offset: 0, color: 'rgba(8,132,255,0)'
                            }]
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function(value) {
                            return `{a|${value.data}}\n{dot| }`
                        },
                        rich: {
                            dot: {
                                width: 4,
                                height: 4,
                                borderColor: '#64E6E2',
                                align: 'center',
                                borderWidth: 1,
                                borderRadius: 2
                            },
                            a: {
                                color: 'white',
                                align: 'center',
                                padding: 2,
                                fontSize: 14
                            }
                        }
                    },
                    ...serie
                }]
            }
      }

    }

}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: sp;
}
</style>
